<!--报名页面-->

<template>
  <div id="coll-apply">
    <!-- 顶部 -->
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 顶部end -->
    <div class="container">
      <!-- 标题 start-->
      <el-row class="coll-el-row1">
        <el-col>
          <h1 class="coll-title">{{collection.title}}</h1>
        </el-col>
      </el-row>
      <!-- 标题 end-->
      <!-- 创建时间 start-->
      <el-row class="coll-el-row2">
        <div class="coll-row-div">
          <el-col :span="4" :offset="2">
            <span>开始时间：</span>
            <span>{{collection.startTime}}</span>
          </el-col>
          <el-col :span="4">
            <span>截止时间：</span>
            <span>{{collection.endTime}}</span>
          </el-col>
          <el-col :span="4">
            <span>作者：</span>
            <span>{{collection.realName}}</span>
          </el-col>
          <el-col :span="4">
            <span>报名费：</span>
            <span>{{collection.price}}</span>
          </el-col>
          <el-col :span="4">
            <span>报名人数：</span>
            <span>{{collection.fillNum}}</span>
          </el-col>
          <el-col :span="4">
            <span>收藏人数：</span>
            <span>{{collection.likeNum}}</span>
          </el-col>
        </div>
      </el-row>
      <!-- 创建时间 end-->
      <!-- 报名表 start-->
      <el-card>
        <el-form label-width="100px" v-for="(item,index) in collection.options" :key="index">
          <template v-if="item.constraint==1">
            <el-form-item :label="item.title" required>
              <!-- 如果是自定义的 -->
              <template v-if="item.type==0">
                <el-input
                  :placeholder="item.note"
                  v-model="record.optionFillResults[index].content"
                ></el-input>
              </template>
              <!-- 如果是不是自定义的 -->
              <template v-else>
                <el-input disabled v-model="item.note"></el-input>
              </template>
            </el-form-item>
          </template>

          <template v-if="item.constraint==2">
            <el-form-item :label="item.title">
              <!-- 如果是自定义的 -->
              <template v-if="item.type==0">
                <el-input
                  :placeholder="item.note"
                  v-model="record.optionFillResults[index].content"
                ></el-input>
              </template>
              <!-- 如果是不是自定义的 -->
              <template v-else>
                <el-input disabled v-model="item.note"></el-input>
              </template>
            </el-form-item>
          </template>
        </el-form>
        <div class="coll-button-success">
          <el-button @click="studentFillRecord()" type="success">修改</el-button>
          <el-button @click="deleteFillRecord()" type="success">删除记录</el-button>
          <template v-if="record.isPay==2">
            <el-button @click="toPay()" type="success">去付款</el-button>
          </template>
        </div>
      </el-card>
      <!-- 报名表 end-->
    </div>
    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
import StudentsHeader from "../../components/StudentHeader.vue";
import Footer from "../../components/Footer.vue";
export default {
  data() {
    return {
      // 定义组件
      header: "StudentsHeader",
      footer: "Footer",
      collection: "",
      defaultOptions: [],
      student: "",
      //填写记录
      record: {
        recordId: "",
        collectionId: "",
        optionFillResults: [] //填写的选项的结果
      }
    };
  },
  created() {
    // 获取跳转时带过来的id
    this.student = JSON.parse(window.sessionStorage.getItem("toIndexForm"));
    this.record.collectionId = this.$route.query.collectionId;
    this.studentFillData();
    this.studentSelfData();
  },
  methods: {
    // 获取学生填写的信息
    studentFillData() {
      this.$get(
        // 获得收集表的信息
        this.$urlPath.collection +
          "/collection/info/" +
          this.record.collectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            this.collection = resp.data;
            console.log(this.collection);
            // 渲染用户的数据到收集表上
            for (let i = 0; i < this.collection.options.length; i++) {
              this.record.optionFillResults.push({
                optionId: this.collection.options[i].optionId,
                content: ""
              });
              let type = this.collection.options[i].type;
              if (type != 0) {
                switch (type) {
                  case 1: {
                    this.collection.options[i].note = this.student.realName;
                    break;
                  }
                  case 2: {
                    this.collection.options[i].note = this.student.accountName;
                    break;
                  }
                  case 3: {
                    this.collection.options[i].note = this.student.collegeName;
                    break;
                  }
                  case 4: {
                    this.collection.options[i].note = this.student.clazzName;
                    break;
                  }
                  case 5: {
                    this.collection.options[i].note = this.student.genderValue;
                    break;
                  }
                  case 6: {
                    this.collection.options[i].note = this.student.identityCard;
                    break;
                  }
                  case 7: {
                    this.collection.options[i].note = this.student.address;
                    break;
                  }
                  case 8: {
                    this.collection.options[i].note = this.student.email;
                    break;
                  }
                }
              }
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    studentSelfData() {
      this.$get(
        // 获得自己填写的信息
        this.$urlPath.record +
          "/record/getFillRecord/" +
          this.record.collectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            this.record = resp.data;
            // 渲染用户的数据到收集表上
            console.log(record);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    toPay() {
      // window.location.href =
      //   this.$urlPath.record + "/record/pay/" + this.record.recordId;
      window.location.href =
        "http://172.18.84.23:8888/record-service/record/pay/" +
        this.record.recordId;
      // window.location.href =
      //   this.$baseurl +"/"+
      //   this.$urlPath.record +
      //   "record/pay/" +
      //   this.record.recordId
    },
    studentFillRecord() {
      this.$put_json(this.$urlPath.record + "/record/update", this.record).then(
        resp => {
          if (resp.code != 200) {
            // console.log(resp);
            return this.$message.error(resp.message);
          } else {
            return this.$message.success("修改成功");
          }
        }
      );
    },
    // 删除填写记录
    deleteFillRecord() {
      this.$deletes(
        this.$urlPath.record + "/record/delete/" + this.record.recordId
      ).then(resp => {
        if (resp.code != 200) {
          return this.$message.error(resp);
        } else {
          console.log(resp);
          return this.$message.success("删除成功");
          location.reload();
        }
      });
    }
  },
  components: {
    StudentsHeader,
    Footer
  }
};
</script>
<style lang="less">
#coll-apply {
  height: 100%;
  display: flex;
  flex-direction: column;
  .container {
    flex: auto;
    .coll-el-row1 {
      .el-col {
        // height: 100px;
        .coll-title {
          font-size: 30px;
          // color: #cc3333;
          font-family: 黑体;
          line-height: 50px;
          text-align: center;
        }
      }
    }
    .coll-el-row2 {
      margin: 6px auto 0 auto;
      font-size: 14px;
      line-height: 35px;
      text-align: center;
      color: #666666;
      background: #f5f5f5;
      .coll-row-div {
        margin-left: 18%;
        width: auto;
      }
      .el-col-4 {
        display: inline-block;
        margin: 0 10px;
        width: auto;
      }
    }
    .coll-el-row3 {
      margin-top: 20px;
      margin-bottom: 45px;
      height: 50%;
      text-indent: 2em;
      font-size: 14pt;
      font-family: 宋体;
      color: #666;
    }
    .coll-button-success {
      margin-left: 50%;
    }
  }
}
</style>